<template>
	<view class="pagebox">
	<view class="searhcbox">
		<input type="text" v-model="searchvalue" placeholder="请输入专家/症状/科室/医院" />
		<view class="searchbtn" @click="search">
			搜索
		</view>
	</view>
	<view class="line">
		<view class="addressbox">
			 <picker
			    mode="multiSelector"
			    :range="multiArray"
			    range-key="fullname"
			    :value="multiIndex"
			    @columnchange="onColumnChange"
			    @change="onPickerChange"
			  >
			    <view class="picker">
			      {{ displayAddress || '所在省/市/区' }}
			    </view>
			  </picker>
		</view>
		<view class="addressbox">
			<picker mode="selector" :value="dindex" :range="doctorlist" range-key="label"     @change="selectdoctorlever">
				<view class="picker" >{{doctorlist[dindex].label}}</view>
			</picker>
		</view>
	</view>
	
	<view class="listbox">
		<view class="itemlist" @click="goaizixun(item)" v-for="item in list " :key="item.id">
			<view class="infobox">
				<view class="imgbox">
					<image :src="'https://changban.dianjingkeji.net/prod-api'+item.davatarUrl" mode=""></image>
					<!-- <image :src="'http://192.168.10.93:8989'+item.davatarUrl" mode=""></image> -->
					
				</view>
				<view class="info">
					
					<view class="nameline">
						<view class="iconfont icon-dingwei">
							<view >
								{{item.juli}}Km
							</view>
						</view>
						<view class="name">
							{{item.dname}}
						</view>
						<view class="keshi">
							{{item.dkeshi}}
						</view>
					</view>
					<view class="hospitalname">
					{{item.orgName}}
					</view>
					<view class="zhichengline">
						<view class="itemzhicheng">
							{{item.dzhicheng}}
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
	</view>
</template>

<script>
	import {findExpertList,getDictData,buyService} from '../../utils/api.js'
	export default {
		data() {
			return {
				num:1,
				total:0,
				searchvalue:'',
				displayAddress:'',
			    list:[],
				dindex:'3',
				doctorlist:[
					{
						type:'0',
						label:'医护专家'
					},
					{
						type:'1',
						label:'医护主管'
					},
					{
						type:'2',
						label:'健康管家'
					},
					{
						type:'',
						label:'全部医生'
					}
				],
				 // 省市联动相关
				      provinces: [],
				      cities: [],
					  areas: [],
				      multiArray: [[], [],[]],    // multiSelector 两列数据
				      multiIndex: [0,0,0],       // multiSelector 当前选中索引
				      displayAddress: '',      // 页面显示的地址文字
				      mapKey: 'MGLBZ-DH4WS-TUBOZ-62XV2-LYF56-ZTBN3'
				
			}
		},
		onLoad(e) {
			this.displayAddress=uni.getStorageSync('address')
			if(e.ser){
				this.searchvalue=e.ser
				 uni.setNavigationBarTitle({
				    title: e.ser
				  })
			}
	
			if(e.phone){
				uni.setStorageSync('tuiphone',e.phone)
				
			
			}
			  
			  
		},
		onShow() {
			if(uni.getStorageSync('tuiphone')){
				let a={
					phone:uni.getStorageSync('phone'),
					doctorPhone:uni.getStorageSync('tuiphone')
				}
				buyService(a).then(res=>{
					console.log(res)
					uni.clearStorageSync('tuiphone')
					if(res.data.code==200){
						let p={
										  phone:uni.getStorageSync('phone'),
										  pageNum:1,
										  selectValue:this.searchvalue,
										  dShengzhuang:'',
										  dKeshi:'',
										  hospitalType:'',
										  lat:uni.getStorageSync('lat'),
										  lon:uni.getStorageSync('lon'),
										  selectProvince:''
						}
						findExpertList(p).then(res=>{
										  console.log(res,'找专家')
										  this.list=res.data.data.datas
										   this.total=res.data.data.totalCount
						})
					}
				})
			}else{
				let p={
								  phone:uni.getStorageSync('phone'),
								  pageNum:1,
								  selectValue:this.searchvalue,
								  dShengzhuang:'',
								  dKeshi:'',
								  hospitalType:'',
								  lat:uni.getStorageSync('lat'),
								  lon:uni.getStorageSync('lon'),
								  selectProvince:''
				}
				findExpertList(p).then(res=>{
								  console.log(res,'找专家')
								  this.list=res.data.data.datas
								   this.total=res.data.data.totalCount
				})
			}
			
			// 加载省份
			  this.loadProvinceList()
							
			
		},
		methods: {
			   // 获取省份列表
			   loadProvinceList() {
			     uni.request({
			       url: 'https://apis.map.qq.com/ws/district/v1/list',
			       data: { key: this.mapKey },
			       success: (res) => {
			         if (res.data.status === 0) {
			           this.provinces = res.data.result[0]
			           this.multiArray[0] = this.provinces
			   
			           // 初始化第一个省对应的城市
			           const firstProvinceId = this.provinces[0].id
			           this.loadCityList(firstProvinceId)
			         }
			       }
			     })
			   },

			
			  // 获取城市列表
			  loadCityList(provinceId) {
			    uni.request({
			      url: 'https://apis.map.qq.com/ws/district/v1/getchildren',
			      data: { id: provinceId, key: this.mapKey },
			      success: (res) => {
			        if (res.data.status === 0) {
			          this.cities = res.data.result[0]
			          this.multiArray[1] = this.cities
			          this.multiIndex[1] = 0
			  
			          // 初始化区
			          const firstCityId = this.cities[0]?.id
			          this.loadAreaList(firstCityId)
			        }
			      }
			    })
			  },
             // 获取区县列表
             loadAreaList(cityId) {
               uni.request({
                 url: 'https://apis.map.qq.com/ws/district/v1/getchildren',
                 data: { id: cityId, key: this.mapKey },
                 success: (res) => {
                   if (res.data.status === 0) {
                     this.areas = res.data.result[0]
                     this.multiArray[2] = this.areas
                     this.multiIndex[2] = 0
                   }
                 }
               })
             },

			// 左列切换更新城市、区
			onColumnChange(e) {
			  const column = e.detail.column
			  const index = e.detail.value
			
			  this.multiIndex[column] = index
			
			  if (column === 0) {
			    // 切换省
			    const provinceId = this.provinces[index].id
			    this.loadCityList(provinceId)
			    this.multiIndex[1] = 0
			    this.multiIndex[2] = 0
			  } else if (column === 1) {
			    // 切换城市
			    const cityId = this.cities[index].id
			    this.loadAreaList(cityId)
			    this.multiIndex[2] = 0
			  }
			},

			
			    // 确认选择
			    onPickerChange(e){
			      const [pIndex, cIndex, aIndex] = e.detail.value
			      this.multiIndex = [pIndex, cIndex, aIndex]
			    
			      const provinceName = this.provinces[pIndex].fullname
			      const cityName = this.cities[cIndex]?.fullname || ''
			      const areaName = this.areas[aIndex]?.fullname || ''
			    
			      this.displayAddress = provinceName + '/' + cityName + '/' + areaName
			    
			      // ✅ 调你原来的接口（不动）
			      let p={
			          phone:uni.getStorageSync('phone'),
			          pageNum:1,
			          selectValue:this.searchvalue,
			          dShengzhuang:'',
			          dKeshi:'',
			          hospitalType:this.doctorlist[this.dindex]?.type||'',
			          lat:uni.getStorageSync('lat'),
			          lon:uni.getStorageSync('lon'),
			          selectProvince:this.displayAddress
			      }
			      findExpertList(p).then(res=>{
			        this.list=res.data.data.datas
			        this.total=res.data.data.totalCount
			      })
			    },

			selectdoctorlever(e){
				this.dindex=e.detail.value
				let p={
								  phone:uni.getStorageSync('phone'),
								  pageNum:1,
								  selectValue:this.searchvalue,
								  dShengzhuang:'',
								  dKeshi:'',
								  hospitalType:this.doctorlist[this.dindex].type,
								lat:uni.getStorageSync('lat'),
								lon:uni.getStorageSync('lon'),
								  selectProvince:this.displayAddress?this.displayAddress:''
				}
				findExpertList(p).then(res=>{
								  console.log(res,'找专家')
								  this.list=res.data.data.datas
								   this.total=res.data.data.totalCount
				})
			},
			
			search(){
				let p={
								  phone:uni.getStorageSync('phone'),
								  pageNum:1,
								  selectValue:this.searchvalue,
								  dShengzhuang:'',
								  dKeshi:'',
								  hospitalType:this.dindex?this.doctorlist[this.dindex].type:'',
								 lat:uni.getStorageSync('lat'),
								 lon:uni.getStorageSync('lon'),
								  selectProvince:this.displayAddress?this.displayAddress:''
				}
				findExpertList(p).then(res=>{
								  console.log(res,'找专家')
								  this.list=res.data.data.datas
								  this.total=res.data.data.totalCount
				})
			},
			goaizixun(e){
				
				uni.navigateTo({
					url:'/pagesA/more/more?dphone='+e.dphone
				})
			},
		},
		onReachBottom() {
			console.log('到底了')
		  if(this.total>this.list.length){
			  this.num=this.num+1
			  let p={
			  				  phone:uni.getStorageSync('phone'),
			  				  pageNum:this.num,
			  				  selectValue:this.searchvalue,
			  				  dShengzhuang:'',
			  				  dKeshi:'',
			  				  hospitalType:this.dindex?this.doctorlist[this.dindex].type:'',
			  				 lat:uni.getStorageSync('lat'),
			  				 lon:uni.getStorageSync('lon'),
			  				  selectProvince:this.displayAddress?this.displayAddress:''
							  
			  }
			  findExpertList(p).then(res=>{
			  				  console.log(res,'找专家')
			  				  this.list=this.list.concat(res.data.data.datas)
			  })
		  }
		}
	}
</script>

<style lang="less">
.pagebox{
	width: 750rpx;
	box-sizing: border-box;
	padding: 30rpx;
	background: linear-gradient(180deg, rgba(242,248,255,1) 0%,rgba(255,255,255,0) 76%);
	.searhcbox{
			  width: 92%;
			  display: flex;
			  align-items: center;
			  height: 70rpx;
			  line-height: 70rpx;
			  border-radius: 35rpx;
			  margin: auto;
			  border: 1rpx solid #1a4f8a;;
			  input{
				  width: 80%;
				  height: 70rpx;
				  padding: 0 10rpx;
				  
			  }
			  .searchbtn{
				  width: 20%;
				  background-color: white;
	              text-align: center;
				 line-height: 70rpx;
				 border-radius: 35rpx;
			  }
	}
	.line{
		width: 100%;
		display: flex;
		align-items: center;
	}
	.addressbox{
		width: 350rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #f4f9ff ;
		border-radius: 10rpx;
		picker{
			width: 350rpx;
			height: 80rpx;
			font-size: 28rpx;
			margin-right: 10rpx;
		}
		.picker{
			width: 350rpx;
			height: 80rpx;
			text-align: center;
			font-size: 28rpx;
			
			margin-right: 10rpx;
			
		}
	}
	.listbox{
				  width: 100%;
				  
				  box-sizing: border-box;
				 
				  .itemlist{
					  width: 100%;
					  margin-bottom: 30rpx;
					  border-radius: 20rpx;
					  background-color: white;
					   padding: 20rpx;
					   box-sizing: border-box;
					  .infobox{
						  display: flex;
						  align-items: center;
						  .imgbox{
							  width: 170rpx;
							  height: 200rpx;
							  border-radius: 10rpx;
							  margin-right: 20rpx;
							  image{
								  width: 100%;
								  height: 100%;
								  border-radius: 10rpx;
							  }
						  }
						  .info{
							flex: 1;
							line-height: 2.5;
							.nameline{
								display: flex;
								align-items: center;
								position: relative;
								.iconfont{
									position: absolute;
									right: 10rpx;
									top: 0;
									color:#D2D2D2 ;
									display: flex;
									align-items: center;
									view{
										font-size: 24rpx;
										color: black;
									}
									
								}
								.name{
									font-weight: bold;
									margin-right: 20rpx;
								}
							}
							.hospitalname{
								font-size: 24rpx;
								padding: 10rpx 30rpx;
								border-radius: 10rpx;
								background-color: #F4F4F4 ;
							}
							.zhichengline{
								display: flex;
								align-items: center;
								.itemzhicheng{
									font-size: 22rpx;
									color: #B16A00 ;
									background-color: #FFF6EB ;
									padding: 10rpx 30rpx;
										border-radius: 10rpx;
								}
								
							}
							
						  }
					  }
					  .tabline{
						  width: 100%;
						  display: flex;
						  margin-top: 20rpx;
						  align-items: center;
						  justify-content: space-evenly;
						  .itemtab{
							  display: flex;
							  align-items: center;
							  color: #898989 ;
							  .iconfont{
								  font-size: 40rpx;
								  color: #BF63FF ;
								  margin-right: 20rpx;
							  }
						  }
					  }
				  }
				  
	}
}
</style>
